<!-- 添加面板 -->
<script setup>
import { reactive, ref, defineEmits } from 'vue'
import { addDMInfosApi } from '@/service/dormitory-manger'
import { useCommonStore } from '@/store/commonStore'
import { storeToRefs } from 'pinia';
import { showElMessage } from '@/utils/showTipMessage'

const { isShowCover, isShowDMAddPanel } = storeToRefs(useCommonStore());
const ruleFormRef = ref(null);
const ruleForm = reactive({
    name: '',
    gender: '男',
    phone_number: '',
    username: '',
    password: '',
    rePassword: '',
    building: ''
})
// 自定义校验规则
const rules = ref({
    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
    phone_number: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
    username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
    rePassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
    building: [{ required: true, message: '请选择宿舍楼', trigger: 'change' }],
});

// 取消按钮
const emit = defineEmits(['cancel-click'])
const cancelClick = () => {
    emit('cancel-click')
}

// 提交按钮
const submitClick = async(formEl) => {
   if (!formEl) return;
   await formEl.validate(async(valid) => {
        if (valid) {
            const res = await addDMInfosApi(ruleForm);
            if (res.data.code === 1) {   // 表示添加成功
                isShowCover.value = false;
                isShowDMAddPanel.value = false;
                showElMessage('添加成功！');
            }
        }
   })
}
</script>

<template>
  <div class="add_panel">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        :size="formSize"
    >
        <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.gender">
                <el-radio label="男" />
                <el-radio label="女" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone_number">
            <el-input v-model="ruleForm.phone_number" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="账号" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input 
                v-model="ruleForm.password" 
                type="password" 
                show-password
                placeholder="6位以上且必须含有数字、字母"
            />
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
            <el-input 
                v-model="ruleForm.rePassword" 
                type="password" 
                show-password
                placeholder="6位以上且必须含有数字、字母"
            />
        </el-form-item>
        <div class="btns">
            <el-button type="success" plain class="submitBtn" @click="submitClick(ruleFormRef)">提交</el-button>
            <el-button type="info" plain class="cancelBtn" @click="cancelClick">取消</el-button>
        </div>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.el-form {
    padding: 30px 20px;
    box-sizing: border-box;
    width: 400px;
    border-radius: 10px;
    background-color: #fff;
    .el-form-item {
        margin: 30px 0;
    }
    .btns {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .submitBtn {
            flex: 1
        } 
        .cancelBtn {
            width: 50px;
        }
    }
}
.el-input {
    width: 300px;
}
</style>